import Vue from 'vue'
import {
  mapState,
  mapMutations
} from 'vuex'
import store from './store.js'
import {
  Menu,
  MenuItem,
  RadioGroup,
  RadioButton,
  Button,
  Upload,
  ColorPicker,
  Input,
  Table,
  TableColumn,
  InputNumber,
  Loading,
  MessageBox,
  Message,
  Icon,
  Tabs,
  TabPane,
  Radio,
  Notification,
  Carousel,
  CarouselItem,
  checkbox,
  Row,
  Col,
  Dropdown,
  DropdownMenu,
  DropdownItem
} from 'element-ui'
import addmod from './components/addmod.vue'
import modsort from './components/modsort.vue'
import chosetheme from './components/chosetheme.vue'
import Setbanner from './components/Setbanner.vue'
import myMod from './components/myMod.vue'
import setmyMod from './components/setmyMod.vue'
import SetShowMod from './components/SetShowMod.vue'
import SetCarousel from './components/SetCarousel.vue'
import SetSponsorNav from './components/SetSponsorNav.vue'
import Home from './Home.vue'


Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Button);
Vue.use(Upload);
Vue.use(ColorPicker);
Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(InputNumber);
Vue.use(Loading);
Vue.use(Icon);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Radio)
Vue.use(RadioGroup);
Vue.use(Carousel)
Vue.use(CarouselItem);
Vue.use(checkbox);
Vue.use(Row);
Vue.use(Col);
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)



window.vm = new Vue({
  el: '#M_TemplatePage',
  store,
  data: {
    setbox: 'chosetheme',
    taskData: {
      "TaskId": "",
      "ActivityTitle": "",
      "StartTime": "",
      "EndTime": "",
      "CutOffTime": "",
      "Coordinate": "",
      "ActivityLocation": "",
      "ActivityCity": "",
      "AllTickets": [],
      "Summary": "",
      "APost": "",
      "Mode": 1,
      "IsEnd": false,
      "UserId": "",
      "TicketCount": 0,
      "CanManage": true,
      "Sponsor": []
    },
    deviceType: 'pc',
    taskdataloaded: false
  },
  created: function () {
    var that = this;
    that.setParameters(Parameters)
    if (TemplateList) {
      that.setTemplateList(TemplateList);
    }

    that.setSiteData(Site);
    that.setmodLists(ModuleList);
  },
  mounted: function () {
    if (Parameters.action == 'Udp') {
      Notification.info({
        title: '提示',
        message: '完成模块设置后不要忘记点“保存”按钮。',
        offset: 70,
        duration: 8000
      })
    }
    switch (this.parameters.type) {
      case "1":
        $.get("/Event/Manage/GetMicroSiteId", {
          taskId: Parameters.taskId
        }, function (data) {
          window.MicroSiteId = data;
        });
        break;
      case "4":
        var that = this;
        $.ajax("/Event/Sponsor/GetSpomsorDesc", {
          type: "post",
          contentType: "application/json",
          headers: {
            ISGZIPDATA: "0"
          },
          data: JSON.stringify({
            sponsorId: that.parameters.sponsorId,
          }),
          success: function (data) {
            if (data.status) {
              window.sponsorData = data.result;
            }
          },
          error: function (err) {
            console.log(err)
          }
        });
        break;
    }
  },
  computed: {
    contentclass: function () {
      return {
        margr: true,
        contentbox: true
      }
    },
    setNavShow: function () {
      return this.setmod == "chosetheme" || this.setmod == "addmod" || this.setmod == "modsort";
    },
    ...mapState([
      'templateList',
      'container',
      'pageConfig',
      'nowchose',
      'setmod',
      'setindex',
      'loading',
      'allloading',
      'olddata',
      'parameters'
    ])
  },
  components: {
    addmod,
    modsort,
    Setbanner,
    chosetheme,
    myMod,
    setmyMod,
    SetShowMod,
    SetCarousel,
    SetSponsorNav,
    Home
  },
  watch: {
    setmod(set) {
      this.setbox = set;
    }
  },
  methods: {
    ...mapMutations([
      'setLoading',
      'setAllloading',
      'setSetmod',
      'setNowchose',
      'delMod',
      'setmodLists',
      'setTemplateList',
      'setSiteData',
      'setParameters'
    ]),
    preview: function () {
      switch (this.parameters.type) {
        case "1":
          window.open("/Events/" + this.parameters.taskId);
          break;
        case "4":
          window.open("/Event/Sponsor/Sponsor?sponsorId=" + this.parameters.sponsorId);
          break;
      }
    },
    handleClick(tab) {
      this.setSetmod(tab.name);
    },
    changeDevice: function (value) {
      if (value == "mobile") {
        switch (this.parameters.type) {
          case "1":
            window.location.href = '/Template/Design/MicroStation?type=2&siteId=' + window.MicroSiteId + '&taskId=' + this.parameters.taskId;
            break;
          case "4":
            window.location.href = '/Template/Design/MicroStation?type=5&siteId=' + window.sponsorData.MobileSiteAddress + '&sponsorId=' + this.parameters.sponsorId;
            break;
        }
      }
    }
  }
})